import React from 'react';
import NormalHeaderBar from '../components/NormalHeaderBar';
import { Link, hashHistory } from 'react-router';
import Message from 'antd/lib/message';
import Input from 'antd/lib/input';
import Button from 'antd/lib/button';
import { fetchDetail,postComment,initArticle } from '../actions/detail';
import { connect } from 'react-redux';

class CommentPage extends React.Component {

    componentDidMount(){
        this.props.fetchDetail(this.props.params.articleId);
    }
    componentWillUnmount() {
        this.props.initArticle();
    }

    handlePostComment(){
        var comment = this.refs.comment.refs.input.value;
        if(comment !== undefined && comment.length > 0) {
            if (comment.length > 400) {
                return Message.error('内容不要大于400个字！');
            } else {
                this.props.postComment(this.props.params.articleId, comment, function(flg) {
                if (flg == 0) {
                    Message.success('管理员会尽快审核留言');
                    window.history.back();
                }
            });
            }
        } else {
            Message.error('内容为空');
        }
    }

    render() {
        var comments = [];  
        this.props.comments.map(function(comment){
            let replies = []
            if (comment.Replies) {
                comment.Replies.map(function(reply) {
                replies.push(
                    <div className="comment-reply" key={reply.Id}>
                        <span className="fa fa-user" aria-hidden="true"></span>
                        <span style={{marginLeft:"0.5rem"}}>回复</span>
                        <span style={{marginLeft:"0.5rem"}}>({reply.CommentDateUtcText})</span>:
                        <div>{reply.CommentText}</div>
                    </div>);
                });
            }
            
            comments.push(
                <div key={comment.Id} style={{borderBottom: "1px dotted #7e7e7e"}}>
                    <span className="fa fa-user" aria-hidden="true"></span>
                        <span style={{marginLeft:"0.5rem"}}>用户</span>
                        <span style={{marginLeft:"0.5rem"}}>({comment.CommentDateUtcText})</span>:
                    <div className="comment-text">{comment.CommentText}</div>
                    {replies}
                </div>
            );
        });
        return(
            <div>
                <NormalHeaderBar title={"添加评论"}/>
                <div style={{margin:"0.5rem 0.5rem 0.2rem 0.5rem",display:"block"}}>
                    <Input style={{marginBottom:"0.5rem"}} type="textarea" ref="comment" placeholder="添加评论" autosize={{ minRows: 3, maxRows: 3 }} />
                    <Button type="primary" onClick={this.handlePostComment.bind(this)}>添加评论</Button>
                </div>
                <div className="comment-container">
                    {comments}
                </div>
            </div>
        )
    }
}

function mapStateToProps(state){
    return { 
        comments: state.detail.comments
    };
}

export default connect(mapStateToProps, {fetchDetail,postComment,initArticle})(CommentPage);